<template>
  <div>
    <div class="attachment-header">
      <h3>会议附件</h3>
      <el-button v-if="canUpload" type="primary" size="small" @click="handleUpload">上传附件</el-button>
    </div>
    
    <div v-if="attachments.length === 0" class="empty-block">
      <el-empty description="暂无会议附件"></el-empty>
    </div>
    
    <el-table v-else :data="attachments" border style="width: 100%">
      <el-table-column prop="name" label="文件名" min-width="200"></el-table-column>
      <el-table-column prop="type" label="类型" width="100"></el-table-column>
      <el-table-column label="大小" width="120">
        <template slot-scope="scope">
          {{ formatFileSize(scope.row.size) }}
        </template>
      </el-table-column>
      <el-table-column prop="uploaderName" label="上传人" width="120"></el-table-column>
      <el-table-column prop="uploadTime" label="上传时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.uploadTime | formatDateTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDownload(scope.row)">下载</el-button>
          <el-button v-if="canUpload" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 上传对话框 -->
    <el-dialog title="上传附件" :visible.sync="dialogVisible" width="500px">
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :http-request="uploadFile"
        :before-upload="beforeUpload"
        :limit="1"
        :file-list="fileList"
        :on-exceed="handleExceed"
        :on-remove="handleRemove">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">支持任意类型文件，单个文件不超过20MB</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload" :disabled="fileList.length === 0">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMeetingAttachments, uploadMeetingAttachment, deleteMeetingAttachment } from '@/api/meeting/attachment'

export default {
  name: 'MeetingAttachments',
  props: {
    meetingId: {
      type: Number,
      required: true
    },
    meetingStatus: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      attachments: [],
      dialogVisible: false,
      fileList: [],
      uploadFile: null
    }
  },
  computed: {
    canUpload() {
      // 只有会议未开始或进行中的状态才能上传附件
      return this.meetingStatus === 0 || this.meetingStatus === 1
    }
  },
  created() {
    this.getAttachments()
  },
  methods: {
    getAttachments() {
      this.loading = true
      getMeetingAttachments(this.meetingId).then(response => {
        this.attachments = response.data || []
        this.loading = false
      })
    },
    handleUpload() {
      this.fileList = []
      this.dialogVisible = true
    },
    handleDownload(row) {
      // 构建下载链接
      const baseUrl = process.env.VUE_APP_BASE_API
      const downloadUrl = `${baseUrl}/file/download?path=${encodeURIComponent(row.path)}&name=${encodeURIComponent(row.name)}`
      
      // 创建一个隐藏的a标签并触发点击
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = downloadUrl
      link.setAttribute('download', row.name)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    handleDelete(row) {
      this.$confirm('确认删除该附件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMeetingAttachment(row.id).then(() => {
          this.$message.success('删除成功')
          this.getAttachments()
        })
      }).catch(() => {})
    },
    beforeUpload(file) {
      const isLt20M = file.size / 1024 / 1024 < 20
      if (!isLt20M) {
        this.$message.error('上传文件大小不能超过 20MB!')
        return false
      }
      this.uploadFile = file
      return true
    },
    handleExceed() {
      this.$message.warning('当前限制选择 1 个文件')
    },
    handleRemove() {
      this.fileList = []
      this.uploadFile = null
    },
    submitUpload() {
      if (!this.uploadFile) {
        this.$message.warning('请选择要上传的文件')
        return
      }
      
      uploadMeetingAttachment(this.uploadFile, this.meetingId).then(() => {
        this.$message.success('上传成功')
        this.dialogVisible = false
        this.getAttachments()
      })
    },
    formatFileSize(size) {
      if (size < 1024) {
        return size + ' B'
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(2) + ' KB'
      } else {
        return (size / 1024 / 1024).toFixed(2) + ' MB'
      }
    }
  }
}
</script>

<style scoped>
.attachment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.attachment-header h3 {
  margin: 0;
}
.empty-block {
  padding: 30px 0;
  text-align: center;
}
</style> 